<template>
  <div class="user-management-page">
    <!-- 搜索区域 -->
    <el-card shadow="hover" class="search-condition">
      <el-form :model="formData" label-width="120px">
        <el-form-item label="用户名称">
          <el-input v-model="formData.userName" />
        </el-form-item>
        <el-form-item label="真实名称">
          <el-input v-model="formData.nickName" />
        </el-form-item>
        <el-form-item label="用户角色">
          <el-input v-model="formData.role" />
        </el-form-item>
        <div>
          <el-button type="primary" @click="search">搜索</el-button>
        </div>
      </el-form>
    </el-card>
    <!-- 表格区域 -->
    <el-card shadow="hover" class="table-area">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="date" label="Date" width="180" />
        <el-table-column prop="name" label="Name" width="180" />
        <el-table-column prop="address" label="Address" />
      </el-table>
    </el-card>
    <!-- 分页区域 -->
    <el-card shadow="hover" class="pagination-area">
      <el-pagination
        background
        :total="1000"
        layout="total, sizes, prev, pager, next, jumper"
      ></el-pagination>
    </el-card>
  </div>
</template>
<script setup>
import { reactive, toRaw } from "vue";
const formData = reactive({
  userName: "",
  nickName: "",
  role: "",
});
const tableData = [
  {
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-04",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-01",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-04",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-01",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-04",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-01",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-04",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-01",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-04",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-01",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
];
function search() {
  console.log(toRaw(formData));
}
</script>
<style lang="scss">
.user-management-page {
  width: 100%;
  height: 100%;
  position: relative;
  padding: 20px;
  overflow: auto;
  .search-condition {
    background-color: #fff;
    padding: 10px;
  }
  .table-area {
    background-color: #fff;
    padding: 10px;
    margin-top: 10px;
  }
  .pagination-area {
    background-color: #fff;
    padding: 10px;
    margin-top: 10px;
  }
}
</style>
